@import (reference) '../../style/mixin.less';

.alert-con {
    .coverScreen(fixed, rgba(0, 0, 0, 0.3));

    z-index: 11;
}

.alert-context {
    .positionCenter;
    .flex(@align-items: stretch);

    z-index: 12;
    width: (600 / @rootValue);
    height: (360 / @rootValue);
    background-color: #fff;
    border-radius: (16 / @rootValue);
    flex-direction: column;

    .alert-content-detail {
        flex: 5;
        .flex;
        .font(40/ @rootValue);
    }

    .confirm-btn {
        .flex;

        flex: 2;
        font-size: (40 / @rootValue);
        border-top: 1px solid #eee;
    }
}

.alert-enter {
    opacity: 0;
    transform: scale(0.9);
}

.alert-enter-active {
    opacity: 1;
    transform: translateX(0);
    transition:
        opacity 300ms,
        transform 300ms;
}

.alert-exit {
    opacity: 1;
}

.alert-exit-active {
    opacity: 0;
    transform: scale(0.9);
    transition:
        opacity 300ms,
        transform 300ms;
}
